import React, { Component } from 'react'
import PropTypes from 'prop-types'

import "./index.css"

export default class Item extends Component {
  static propTypes={
    acceptChecked: PropTypes.func.isRequired,
    remove: PropTypes.func.isRequired
  }

  handleCheck=(id)=>{
    return (e)=>{
      this.props.acceptChecked(id, e.target.checked)
    }
  }

  handleDelete=(id)=>{
    if(window.confirm('确定删除吗?')){
      this.props.remove(id)
    }
  }

  render() {
    const {id,name,done} = this.props
    return (
      <li className="item">
          <label>
            <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
            <span>{name}</span>
          </label>
          <button className="btn btn-danger btn-none" onClick={()=>this.handleDelete(id)}>删除</button>
      </li>
    )
  }
}
